<!--
 * @Description:
 * @Author: Richeneen
 * @Date: 2022-10-12 15:22:48
 * @LastEditTime: 2022-10-25 18:37:52
 * @LastEditors: liqi
-->
<template>
  <!-- 资讯列表页面 -->
  <div>
    <!-- 第一行 头部控件 -->
    <div class="header">
      <el-form :inline="true">
        <el-form-item>
          <el-select v-model="params.status" clearable placeholder="状态">
            <el-option label="未审核" value="未审核" />
            <el-option label="审核通过" value="审核通过" />
            <el-option label="审核不通过" value="审核不通过" />
            <el-option label="推荐" value="推荐" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-input
            v-model="params.title"
            clearable
            placeholder="标题"
          />
        </el-form-item>
        <el-form-item>
          <el-select
            v-model="params.categoryId"
            clearable
            placeholder="请选择栏目"
          >
            <el-option
              v-for="item in categories"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="toPublish">发布风采</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 第一行 头部控件 结束 -->
    <!-- 第二行 表格  -->
    <div class="table">
      <el-table :data="articleList.list" style="width: 100%">
        <el-table-column type="index" :index="1" label="序号" />
        <el-table-column prop="cover" label="封面" width="180">
          <template slot-scope="scope">
            <img width="40px" :src="scope.row.cover" alt="">
          </template>
        </el-table-column>
        <el-table-column prop="title" label="风采" />
        <el-table-column prop="status" label="状态">
          <template slot-scope="scope">
            <el-tag
              v-if="scope.row.status === '审核成功'"
              type="success"
            >审核通过</el-tag>
            <el-tag
              v-else-if="scope.row.status === '推荐'"
              type="warning"
            >推荐</el-tag>
            <el-tag
              v-else-if="scope.row.status === '审核不成功'"
              type="danger"
            >审核不通过</el-tag>
            <el-tag v-else type="info">未审核</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="description" label="操作">
          <template slot-scope="scope">
            <el-button
              type="text"
              class="recommend"
              @click="toRecommend(scope.row.id, '推荐')"
            >推荐</el-button>
            <el-button
              type="text"
              class="blue_info"
              @click="toExamine(scope.row)"
            >审核</el-button>
            <el-button
              type="text"
              class="red_info"
              @click="toDelete(scope.row.id)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 第二行 表格 结束 -->
    <!-- 审核模态框 -->
    <div class="customer_modal">
      <el-dialog
        title="审核风采信息"
        :visible.sync="dialogVisible"
        width="30%"
        :before-close="handleClose"
      >
        <div v-html="content" />
        <span slot="footer" class="dialog-footer">
          <el-button type="danger" @click="toNoPassed">审核不通过</el-button>
          <el-button type="primary" @click="toPassed">审核通过</el-button>
        </span>
      </el-dialog>
    </div>

    <!-- 审核模态框 结束-->
    <!-- 第三行 分页 -->
    <div class="page">
      <el-pagination
        :current-page="params.page"
        :page-sizes="[5, 8, 10, 15]"
        :page-size="params.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="articleList.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    <!-- 第三行 分页 结束 -->
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { updateArticle, deleteArticle, changeStatus } from '@/api/article'
export default {
  data() {
    return {
      // 查询分页参数
      params: {
        page: 1,
        pageSize: 10
      },
      // 模态框
      dialogVisible: false,
      content: {}
    }
  },
  computed: {
    // 获取栏目数据
    ...mapGetters(['categories']),
    // 获取风采列表
    ...mapGetters(['articleList'])
  },
  created() {
    // 获取栏目数据
    this.$store.dispatch('category/queryCategory', { page: 1, pageSize: 2 })
    // 获取风采列表
    this.$store.dispatch('article/queryArticleList', this.params)
  },
  mounted() {},
  methods: {
    // 查询按钮
    onSubmit() {
      const temp = { ...this.params }
      // console.log(this.params.categoryId, '1111111')
      for (const key in temp) {
        if (!temp[key]) {
          delete temp[key]
        }
      }
      this.$store.dispatch('article/queryArticleList', temp)
    },
    // 推荐按钮
    toRecommend(id, status) {
      this.$confirm('您确定要推荐此资讯吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async() => {
          const res = await changeStatus(id, status)
          this.$message({
            type: 'success',
            message: res.message
          })
          // console.log(res, '11111')
          this.$store.dispatch('article/queryArticleList', this.params)
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消推荐'
          })
        })
    },
    // 审核按钮
    toExamine(row) {
      this.content = { ...row }
      // console.log({ ...row }, 11111);
      // console.log(this.content, 222222222)
      this.dialogVisible = true
    },
    // 模态框关闭事件
    handleClose() {
      this.dialogVisible = false
    },
    // 审核不通过事件
    async toNoPassed() {
      const res = await changeStatus(this.content.id, '审核不成功')
      this.$message({
        type: 'success',
        message: res.message
      })
      this.dialogVisible = false
      console.log(this.content)
      this.$store.dispatch('article/queryArticleList', this.params)
    },
    // 审核通过事件
    async toPassed() {
      const res = await changeStatus(this.content.id, '审核成功')
      this.$message({
        type: 'success',
        message: res.message
      })
      this.dialogVisible = false
      // console.log(this.content)
      this.$store.dispatch('article/queryArticleList', this.params)
    },
    // 删除按钮
    toDelete(id) {
      this.$confirm('您确定要删除这条数据吗，是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async() => {
          const res = await deleteArticle({ id })
          this.$message({
            type: 'success',
            message: res.message
          })
          this.$store.dispatch('article/queryArticleList', this.params)
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消推荐'
          })
        })
    },
    // 当前页条数发生改变事件
    handleSizeChange(pageSize) {
      this.params.pageSize = pageSize
      this.params.page = 1
      this.$store.dispatch('article/queryArticleList', this.params)
    },
    // 当前页码发生改变事件
    handleCurrentChange(page) {
      this.params.page = page
      this.$store.dispatch('article/queryArticleList', this.params)
    },
    // 发布风采按钮
    toPublish() {
      this.$router.push({ path: '/admin/info/article/Publish' })
    }
  }
}
</script>
<style scoped>
/* .tabel el-button ..blue-btn{
  color: #3a71a8;
} */
.tabel el-button .delete {
  color: #f56c6c;
}
</style>
